<template>
  <el-card>
    <h1 class="me-author-name">知识漫游系统</h1>

    <!-- 知识漫游系统的信息卡片 -->
    <!-- 设计思路是想用来显示用户头像和用户昵称，但是考虑到目前流行的网页应用都是在header上显示头像 -->
    <!-- 充分考虑用户使用习惯选择在header上显示用户头像和点击用户头像之后的操作 -->
    <!-- 现在用作一个图标，这个图标使用的是阿里巴巴矢量图标库 -->
    
    <div class="me-author-tool">
      <i @click="showTool(bilibili)" :title="blog1.title" class="iconfont icon-bilibili-fill"></i>
    </div>
  </el-card>

</template>

<script>
  export default {
    name: 'CardMe',
    data() {
      return {
        blog1: {
          title: '百度',
          message: '<a target="_blank" href="">https://baidu.com</a>'
        }
      }
    },
    methods: {
      showTool(tool) {
        this.$message({
          duration: 0,
          showClose: true,
          dangerouslyUseHTMLString: true,
          message: '<strong>' + tool.message + '</strong>'
        });
      }
    }
  }
</script>

<style scoped>
  .me-author-name {
    text-align: center;
    font-size: 30px;
    border-bottom: 1px solid #5FB878;
  }

  .me-author-description {
    padding: 8px 0;
  }

  .me-icon-job {
    padding-left: 16px;
  }

  .me-author-tool {
    text-align: center;
    padding-top: 10px;
  }

  .me-author-tool i {
    cursor: pointer;
    padding: 4px 10px;
    font-size: 30px;
  }
</style>
